
/*==============================================================================================================

	__________                            _________                        _________ __          _____  _____ 
	\______   \____    ______ ____       /   _____/____    ______ ______  /   _____//  |_ __ ___/ ____\/ ____\
	 |    |  _|__  \  /  ___// __ \      \_____  \\__  \  /  ___//  ___/  \_____  \\   __\  |  \   __\\   __\ 
	 |    |   \/ __ \_\___ \\  ___/      /        \/ __ \_\___ \ \___ \   /        \|  | |  |  /|  |   |  |   
	 |______  (____  /____  >\___  > /\ /_______  (____  /____  >____  > /_______  /|__| |____/ |__|   |__|   
			\/     \/     \/     \/  )/         \/     \/     \/     \/          \/                           


	Base sass styles: opinionated defaults


=================================================================================================================


 /*
 * Import Sass add-ons
 */

@import "compass";
@import "normalize";
@import "animation";
@import "keyframes";

//@import "breakpoint";
//@import "jqueryui";


/* Adapted from:

 * HTML5 Boilerplate
 *
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.

==========================================================================
Base styles: opinionated defaults
========================================================================== */

*, *::before, *::after {
	@include box-sizing(border-box);
}

html, button, input, select, textarea {
	color: black;
}

/* Open Sans Available weights:
		
	300 - light
	300italic
	400 - normal / regular
	400italic
	600 - medium
	700 - bold
	800 - black */

body {
	font-size: 16px;
	font-weight: 300;
	line-height: 1.6;
	font-family: 'Open Sans', sans-serif;
	background: white;

	-webkit-font-smoothing: antialiased;
	
	input { 
		font-family: 'Open Sans', sans-serif;
	}
	code, pre, textarea {
		font-family: 'Inconsolata', monospace;
		-webkit-font-smoothing: antialiased;
	}
}

/*
 * Basic styles to heading objects
 */

h1, h2, h3, h4, h5, h6 {
	font-weight: 300;
	margin: 0;
}

/*
 * Setup iconfont */
 
@font-face {
	font-family: 'earth-cons';
	src:    url('../font/earth-cons.eot');
	src:    url('../font/earth-cons.eot?#iefix') format('embedded-opentype'),
			url('../font/earth-cons.woff') format('woff'),
			url('../font/earth-cons.ttf') format('truetype'),
			url('../font/earth-cons.svg#FontAwesome') format('svg');
	font-weight: normal;
	font-style: normal;
}

/* The actual font declaration */
.ff-icon, .ff-icon-after::after, .ff-icon-before::before {
	font-family: 'earth-cons';
	letter-spacing: 0;
	font-size: 1em;
	line-height: 1;
	font-weight: normal;
	font-style: normal;
	
	//cursor: default;

	/* disallow text highlighting 
	-webkit-touch-callout: none;

	-webkit-user-select: none;
			user-select: none; */
}


/*
 * Allow only vertical resizing of textareas.
 */
textarea {
	resize: vertical;
}

/* ==========================================================================
   
   Browse Happy prompt
   
   ==========================================================================

.browsehappy {
	margin: 0.2em 0;
	background: #ccc;
	color: #000;
	padding: 0.2em 0;
}


/* ==========================================================================================================                                                                                          

	Base styles below:

============================================================================================================= */

/*
 * Settings for compass vendor prefixing.
 */

$experimental-support-for-mozilla : true !default;
$experimental-support-for-webkit : true !default;
$support-for-original-webkit-gradients : false !default;
$experimental-support-for-opera : false !default;
$experimental-support-for-microsoft : true !default;
$experimental-support-for-khtml : false !default;


/*
 * Define Global SASS variables.
 */

$light-off-black: #2f2f2f;
$off-black: #262626;
$off-white: #ebebeb;
$nice-green: #7cb313;
$google-green: #0F9D58;
$google-red: #DB4437;
$google-yellow: #F4B400;
$google-blue: #4285F4;
$mid-grey: #676767;


/*
 * Remove text-shadow in selection highlight: h5bp.com/i
 * These selection declarations have to be separate.
 * Customize the background color to match your design.
 

::-moz-selection {
	background: rgba(0,0,0,.25);
	text-shadow: none;
}
*/

::selection {
	background: $google-yellow;
	color: white;
	text-shadow: none;
}

/*
 * Setup SASS placeholders.
 */

%css-ellipsis {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

%greyscale-100 {
    @include experimental( filter, grayscale(100%) );    
}
%greyscale-35 {
    @include experimental( filter, grayscale(35%) );
}
%greyscale-none {
    @include experimental( filter, none );
}


/*
 * Keyframe Animation declarations.
 */

$cord-thickness: 8px;

@include keyframes(somethingAppear) { 
    0 {
    	opacity: 0;
        @include create-transform( $trans-y: 40px ); 
    }
    100% {
     	opacity: 1;
        @include create-transform( $trans-y: 0px ); 
    }
}
@include keyframes(swingCord) {
	
	// first swing left
	0% {
		width: $cord-thickness;
	}
	25% {
		width: 70px;
	}
	50% {
		width: 130px;
	}
	75% {
		width: 70px;
	}
	100% {
		width: $cord-thickness;
	}
}

@include keyframes(flipAround) {
	0% {
		right: auto;
		left: calc(50%);
		@include create-transform( $rotate-y: 0deg ); 
	}
	49.9999% {
		right: auto;
		left: calc(50%);
		@include create-transform( $rotate-y: 0deg ); 
	}
	50% {
		left: auto;
		right: calc(50% + 8px);
		@include create-transform( $rotate-y: 180deg ); 
	}
	99.9999% {
		left: auto;
		right: calc(50% + 8px);
		@include create-transform( $rotate-y: 180deg ); 
	}
	100% {
		right: auto;
		left: calc(50%);
		@include create-transform( $rotate-y: 0deg ); 
	}
}

@include keyframes(swingBulb) {
	
	// first swing left
	0% {
		@include create-transform( $trans-x: 0px ); 	
	}
	25.1% {
		@include create-transform( $trans-x: 70px, $rotate-z: -10deg, $trans-y: 3px ); 	
	}
	48% {
		@include create-transform( $trans-x: 0px, $rotate-z: 0deg, $trans-y: 0px ); 	
	}
	// then swing right
	75.2% {
		@include create-transform( $trans-x: -75px, $rotate-z: 10deg, $trans-y: 3px ); 	
	}
}

@include keyframes(rollUpFromBottom) {
	0% {
		@include create-transform( $rotate-x: 180deg );
	}
	100% {
		@include create-transform( $rotate-x: 0deg );
	}
}
@include keyframes(rollDownToBottom) {
	0% {
		@include create-transform( $rotate-x: 0deg );
	}
	100% {
		@include create-transform( $rotate-x: 180deg );
	}
}

@include keyframes(rollDownFromTop) {
	0% {
		@include create-transform( $rotate-x: -180deg );
	}
	100% {
		@include create-transform( $rotate-x: 0deg );
	}
}

@include keyframes(fadeIn) {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

@include keyframes(fadeOut) {
	0% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}

/*
 * Style up scrollbar for webkit.
 */

::-webkit-scrollbar { 
	
}
::-webkit-scrollbar-track {
	
}
::-webkit-scrollbar-thumb { 
   
}

/*
 * Base styles
 */

html, body {
	height: 100%;
}

body {
	background: #010116;
	margin: 0;
	padding: 0;

 	@include experimental(perspective, 500px);
}

/* =============================================================

	Primary Styles 
	
	Authors: Marcio Puga, Tim Paul
	
	========================================================================== */

html, body {
	font-family: 'Roboto', sans-serif;
}

body:not(.intro-finished) {
	min-height: 600px;	
}

$intro-gutter: 50px;
$off-black: #2c2c2c;

#eh-logo {
	z-index: 50;
	position: absolute;
	top: 0;
	left: 0;
	width: 145px;
	height: 120px;
	background: darken($off-black, 5%) url(../images/logo-dark.png) 31px 30px no-repeat;
	background-size: auto 50%;

	@include animation( fadeIn, .5s, 2s, normal, ease-in-out );
}

span.arrows {
	position: absolute;
	bottom: 20px;
	right: 30px;
	height: 45px;
	line-height: 45px;
	font-size: 35px;
	text-align: center;
	color: white;
	z-index: 2;

	&:before {
		content: "\e615";
	}
}

#wrapper {
	overflow: hidden;
	position: relative;
	height: 100%;
}

.color_value {
	display: none;
}

#myCanvas {
	margin: 0px;
	padding: 0px;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

#intro {
	position: absolute;
	top: 0;
    left: 0;
    right: 0;
    bottom: 0;
	z-index: 45;
	background: #e5e5e5;
	padding: $intro-gutter;

	hgroup {
		
		position: absolute;
		top: 165px;
		left: $intro-gutter;
		color: $off-black;

		img {
        	display: block;
        	width: 150px;
        	margin: 0 0 20px;
		}

		h1 {
			font-size: 45px;
			line-height: 1;
			letter-spacing: -2px;
			margin: 0 0 20px;
		}
		h2 {
			font-size: 17px;
			line-height: 1.45;
			margin: 0;
			position: relative;

			strong {
				font-weight: 600;
			}
		}
		h3 {
			font-size: 14px;
			font-weight: 700;
			line-height: 1.45;
			margin: 13px 0 0;
			position: relative;
		}

		@include animation( fadeIn, 0s, .5s, normal, ease-in-out );
	}

	@include experimental( perspective, 1200px );
}



#swinging-light-bulb {

	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	width: 100%;
	overflow: hidden;
	z-index: 2;
	pointer-events: none;
	@include user-select(none); 
	
	@include animation( fadeIn, 1.5s, .5s, normal, ease-in-out );

	#spot-light {
		position: absolute;
		width: 690px;
		height: 600px;
		left: calc(50% - 345px);
		top: -20px;

		@include background-image( radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 70%) );
		// @include animation( swingBulb, 6s, 9s, normal, infinite, both, linear );
	}

	#cord {

		height: 100%;
		width: $cord-thickness;
		position: absolute;
		top: -80%;
		left: calc(50% + 4px);
		// border-radius: 50%;
		
		// box-shadow: -$cord-thickness 0 0 white, -$cord-thickness 0 6px rgba(0,0,0,.15);
		// box-shadow: -$cord-thickness 0 0 darken(#eee, 25%), -$cord-thickness 0 4px rgba(0,0,0,.3);
		box-shadow: -$cord-thickness 0 0 lighten($off-black, 5%);
		
		// -webkit-animation-delay: 6s;
		// -webkit-animation-duration: 4.5s, 9s;
		// -webkit-animation-name: swingCord, flipAround;
		// -webkit-animation-timing-function: linear;
		// -webkit-animation-iteration-count: infinite;

		// -moz-animation-delay: 6s;
		// -moz-animation-duration: 4.5s, 9s;
		// -moz-animation-name: swingCord, flipAround;
		// -moz-animation-timing-function: linear;
		// -moz-animation-iteration-count: infinite;

		// -ms-animation-delay: 6s;
		// -ms-animation-duration: 4.5s, 9s;
		// -ms-animation-name: swingCord, flipAround;
		// -ms-animation-timing-function: linear;
		// -ms-animation-iteration-count: infinite;

		// animation-delay: 6s;
		// animation-duration: 4.5s, 9s;
		// animation-name: swingCord, flipAround;
		// animation-timing-function: linear;
		// animation-iteration-count: infinite;
	}

	#bulb {
		width: 138px;
		height: 310px;
		background: url(../images/light-bulbs.png) 0 0 no-repeat;
		background-size: auto 100%;
		position: absolute;
		left: calc(50% - 69px);
		top: 5%;
		cursor: pointer;
		z-index: 1;

		pointer-events: auto;
		@include user-select( all ); 

		// @include animation( swingBulb, 6s, 9s, normal, infinite, both, linear );
		
		&:after {
			content: "";
			width: 30px;
			height: 15px;
			border-radius: 15px 15px 0 0;
			position: absolute;
			top: -14px;
			left: calc(50% - 15px);
			background: $off-black;
		}

		.speech-bubble {
			left: auto;
			right: -140px;
			top: 130px;
			background: gold;
			color: darken(gold, 32%);
			font-size: 14px;
			padding: 0 20px;
			
			&:before {
				border-top-color: gold;
			}

			h3 {
				font-size: 25px;
				margin: 26px 0 2px;
			}

			@include simple-transform( $rotate: 23deg );
			@include animation( fadeIn, 2s, 1s, normal, ease-in-out );
		}
	}
}

#white-bg {
	position: absolute;
	left: 0; right: 0;
	bottom: 0;
	height: 250px;
	background: url(../images/front-page-bg.png) center bottom no-repeat;
	background-size: auto 100%;
	opacity: .98;

	@include transition-property( opacity );
	@include transition-duration( 1.5s );
	@include transition-timing-function( ease-in-out );

	@include backface-visibility( hidden );  
	@include experimental( transform-origin, 50% 100% );
	@include animation( rollUpFromBottom, 1s, 2s, normal, ease-in-out );

	.speech-bubble {
		margin-left: -350px;
	}
}

$bubble-size: 120px;

.speech-bubble {
	width: $bubble-size;
	height: $bubble-size;
	border-radius: ($bubble-size * .5);
	background: $off-black;
	color: white;
	position: absolute;
	left: calc(50% - 65px);
	top: 5px;
	font-weight: 400;
	padding: 0 10px;
	font-size: 13px;
	line-height: 1.25;
	text-align: center;
	
	&:before {
		// CSS TRIANGLE
		content: "";
		position: absolute;
		z-index: 1;
		left: 7px;
		bottom: -17px;
		border: 15px solid transparent;
		border-top-color: $off-black;
		@include simple-transform( $rotate: 32deg );
	}

	h3 {
		font-family: 'Bangers';
		font-size: 20px;
		white-space: nowrap;
		margin: 32px 0 2px;
	}
	p {
		margin: 0;
	}
	
	@include simple-transform( $rotate: -15deg ); 
}


#skypad-logo {
	z-index: 35;
	position: absolute;
	bottom: 20px;
	left: 20px;
	
	@include animation( fadeOut, 0s, 0.2s, normal, ease-in-out );
}

$navy-blue: #081634;

// The intro screen melts away and reveals the night sky behind it...

body.intro-finished {
	
	#eh-logo {
		background-color: transparent;

		&:hover {
			background-color: $navy-blue;
		}
	}

	#intro {
		background: rgba(0,0,0,0);
				
		pointer-events: none;
		@include user-select(none);
		
		> * {
			pointer-events: none;
			@include user-select(none);
		}

		hgroup {
			@include animation( fadeOut, 0s, 1s, normal, 1, ease-in-out );
		}
		.speech-bubble {
			display: none;
		}
	}

	#white-bg {
		@include animation( rollDownToBottom, 1s, 1.5s, normal, 1, ease-in-out );
	}

	#swinging-light-bulb {
		
		#spot-light {
			display: none;
		}

		#bulb {
			background-position: -138px 0;
			pointer-events: none;
			@include user-select(none);
		}

		@include animation( fadeOut, 1.8s, 1s, normal, 1, ease-in-out );
	}

	#myCanvas {
		cursor: -webkit-grab;
		cursor: -moz-grab;

		&.dragging {
			cursor: -webkit-grabbing;
			cursor: -moz-grabbing;
		}
	}

	#skypad-logo {		
		@include animation( fadeIn, 3s, 1s, normal, ease-in-out );
	}

	.speech-bubble.add-constellation {
		z-index: 50;
		right: 85px;
		left: auto;
		top: 60px;
		background: gold;
		color: $off-black;

		@include simple-transform( $rotate: 28deg ); 
		@include animation( fadeIn, 3s, 1s, normal, ease-in-out );

		&:before {
			border-top-color: transparent;
			border-bottom-color: gold;
			bottom: auto;
			top: -22px;
			left: auto;
			right: 20px;
			@include simple-transform( $rotate: 20deg );
		}
		h3 {
			margin-top: 30px;
		}
	}
}







#panda {
    position: absolute;
    top: -160px;
    left: 400px;
    display: block;
    z-index: 25;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    outline: 0;
    cursor: pointer; cursor: hand;
}



#intro .switches {
	width: 500px;
	height: 700px;
	text-align: center;
	position:absolute;
	margin: auto;
	top: 0; left: 0; bottom: 0; right: 0;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	outline: 0;
	cursor: pointer; cursor: hand;
}

.intro-content {
	background-color: #2bca00;
	color: #FFFFFF;
	margin: 5px;	
}

#info-buttons {
	top: 10px;
	right: 10px;
	width: 66px;
	position: absolute;
	z-index: 30;
	display: none;
	padding: 0;
	margin: 0;

	&.visible {
		display: block;
	}

	a {
		display: block;
		height: 55px;
		line-height: 55px;
		text-align: center;
		text-decoration: none;
		margin: 0 0 5px;
		color: white;

		&:before {
			font-family: 'earth-cons';
			font-size: 28px;
			color: inherit;
		}

		&#add-constellation {
			
			background: gold;
			margin: 0 0 10px;
			color: $off-black;
			
			&:before {
				content: "\e605";
			}
		}
		
		&#cancel-selection {
			background: white;
			margin: 0 0 10px;
			color: $off-black;

			&:before {
				content: "\e60c";
				font-size: 36px;
			}
		}

		&#app-menu {

			&:before {
				content: "\e604";
			}
		}
		&#sign-up-earthhour {
			&:before {
				content: "\e60b";
			}
		}
		&:not(#add-constellation) {
			&:not(#cancel-selection) {
				&:not(.active) {
					&:hover {
						background: $navy-blue;	
					}
				}
			}
		}
		&.active {
			background: white;
			color: $navy-blue;
		}
	}
}


body.add-constellation {
	> .speech-bubble {
		&.add-constellation {
			display: none;
		}
	}
}


.dialog-panel {
	background: white;
	padding: 30px;
	box-shadow: 0 0 10px rgba(0,0,0,.6);
	color: $navy-blue;

	@include animation( somethingAppear, 0s, .5s, normal, ease-in-out );
}


#controls {
	position: absolute;
	z-index: 30;
	width: 150px;
	height: 80px;
	left: calc(50% - 75px);
	bottom: 0;
	padding: 11px 0 0 0;
	text-align: center;

	div {
		margin-right: 5px;
		position: relative;
		display: inline-block;
		vertical-align: top;
		cursor: pointer; 
		color: $navy-blue;
		
		&:before {
			content: "";
			font-family: 'earth-cons';
			font-style: normal;
			display: block;
			font-size: 40px;
			line-height: 1;
			margin: 0 0 3px;
		}
		&:after {
			display: block;
			font-size: 12px;
			white-space: nowrap;
		}

		&#redo-selection {
			margin: 0 20px 0 0;
			&:before {
				content: "\e60e";
			}
			&:after {
				content: "undo";
			}
		}
		&#done-selection {
			&:before {
				content: "\e60d";
			}
			&:after {
				content: "save";
			}
		}
	}
}

#input-constellation {
	position: absolute;
	z-index: 30;
	width: 430px;
	height: 240px;
	left: calc(50% - 175px);
	bottom: 0;
	padding: 60px 30px 0;
	
	h4 {
		font-family: 'Bangers';
		font-size: 20px;
		position: absolute;
		top: -39px;
		left: 0;
		color: white;
	}
	h3 {
		font-size: 25px;
		line-height: 1.2;
		letter-spacing: -1px;
		top: 22px;
		width: 100%;
		position: absolute;
	}
	.form {
		padding: 10px 0 0 0;
		position: relative;
		height: 100%;

		&:after {
			content: "";
			display: table;
			clear: both;
		}
	}
	.field {
		float: left;
		width: 65%;
		height: 100%;
		position: relative;

		&:nth-of-type(2) {
			width: 25%;
			margin: 0 0 0 10%;
		}
	}
	label {
		display: block;
		font-size: 13px;
		line-height: 1.3;
		font-weight: 500;
		margin: 0 0 8px;
	}
	input {
		display: block;
		width: 100%;
		font-weight: 500;
		font-size: 15px;

		&[type="text"] {
			background: transparent;
			border: 4px solid $off-white;
			padding: 5px 6px;
			margin: 0 0 12px;
		}
		&[type="submit"] {
			background: $google-blue;
			color: white;
			font-weight: 700;
			padding: 20px 0;
			text-shadow: 0 1px 0 darken($google-blue, 10%);
			border: none;
			position: absolute;
			bottom: 0;
			font-family: 'Bangers', sans-serif;
			font-size: 18px;
		}
		&.error {
			background: $google-red;
			border-color: darken($google-red, 5%);
			color: white;

			&::-webkit-input-placeholder {
				color: lighten($google-red, 30%);
				text-shadow: 0 1px 0 darken($google-red, 10%);
			}
			&::-moz-input-placeholder {
				color: lighten($google-red, 30%);
				text-shadow: 0 1px 0 darken($google-red, 10%);
			}
			&::-ms-input-placeholder {
				color: lighten($google-red, 30%);
				text-shadow: 0 1px 0 darken($google-red, 10%);
			}
		}
		&#color {
			border: 4px solid $off-white;
			// background: $off-white;
			width: 60px;
			height: 45px;
		}
	}
}



#share {
	position: absolute;
	color: white;
	width: 300px;
	background: $navy-blue;
	bottom: 0;
	left: calc(50% - 150px);
	padding: 20px 30px;
	
	font-size: 12px;
	z-index: 30;
	
	h4 {
		font-family: 'Bangers';
		font-size: 20px;
		position: absolute;
		top: -39px;
		left: 0;
		color: white;
	}
	.left {
		display: block;

		h3 {
			margin: 0;
			font-size: 20px;
			line-height: 1.3;
		}
	}
	.right {
		padding: 20px 0 0;
		white-space: nowrap;

		> * {
			display: inline-block;
			vertical-align: top;

			&:nth-child(2) {
				margin: 0 20px;
			}
		}
	}
}


#info_burger {
	position: absolute;
	color: $navy-blue;
	top: -500px;
	right: 83px;
	padding: 0;
	font-size: 12px;
	width: 400px;
	z-index: 30;

	h4 {
		font-family: 'Bangers';
		font-size: 20px;
		position: absolute;
		left: -95px;
		top: 60px;
		color: white;

		@include simple-transform($rotate: -90deg);
	}
	p {
		background: white;
		padding: 20px;
		margin: 0;

		strong {
			font-size: 15px;
		}
	}
	.logos {
		background: $navy-blue;
		padding: 20px;
		text-align: right;

		> a {
			display: inline-block;

			&:nth-of-type(2) {
				margin: 0 10px;
			}
		}
	}
}


.cursor {
	width: 11px;
	height: 17px;
	position: absolute;
	z-index: 10;
	left:20px;
	top:20px;
	-moz-user-select: -moz-none;
	-khtml-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
	user-select: none;
}







/* =================================================================================

					   .___.__                                    .__               
	  _____   ____   __| _/|__|____      ________ __   ___________|__| ____   ______
	 /     \_/ __ \ / __ | |  \__  \    / ____/  |  \_/ __ \_  __ \  |/ __ \ /  ___/
	|  Y Y  \  ___// /_/ | |  |/ __ \_ < <_|  |  |  /\  ___/|  | \/  \  ___/ \___ \ 
	|__|_|  /\___  >____ | |__(____  /  \__   |____/  \___  >__|  |__|\___  >____  >
		  \/     \/     \/         \/      |__|           \/              \/     \/ 


	Media Queries for Tablet/Touch first design 

   
	1:       Styles for Portrait screens
		   
   ========================================================================== */



@media only screen 
	//and (orientation: landscape)
	and (max-height: 550px) {
	


}







/* ==========================================================================
   
   Helper classes
   
   ========================================================================== */

/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `::before` to contain the top-margins of child elements.
 */

.clearfix::before, .clearfix::after {
	
	content: " ";   /* 1 */
	display: table; /* 2 */

}
.clearfix::after {
	clear: both;
}
/*
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */
.clearfix {
	*zoom: 1;
}





.hidden {
	display: none;
}
